<style type="text/css">
    div#rainbow_image_selector_widget {
        width:100%;
        height:60px;
        padding:10px 0;
        line-height:60px;
        font-size:16px;
    }
    div#rainbow_image_selector_widget label:last-child {
        display:none;
    }
    div#rainbow_image_selector_widget:hover, div.rainbowImageDragOver {
        color:white;
        text-align:center;
        background:#ff1493;
        line-height:30px;
        cursor:pointer;
    }
    div#rainbow_image_selector_widget:hover label {
        cursor:pointer;
    }
    div#rainbow_image_selector_widget:hover label:last-child {
        display:block;
    }
    div#rainbow_image_selector_widget:hover div#rainbow_image_selector {
        background:#ff1493;
    }
    div#rainbow_image_selector_div {
        float:left;
    }
</style>
<div id="rainbow_image_selector_widget">
    <div id="rainbow_image_selector_div">
    </div>
    <label>&nbsp;&nbsp;&nbsp;&nbsp;JPG, GIF, PNG或BMP，单张最大5M，最多5张，可拖拽文件上传</label>
    <label>拖拽多张图片到这里，直接上传</label>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        var rainbowImagePreviewListWidget = $("div#rainbow_image_list_widget");
        $("div#rainbow_image_selector_div").load('/rainbow/image/save', function(){
            $(this).find("div#rainbow_image_selector").find("input[type='file']").change(function(){
                var files = this.files;
                if (null != files && files.length > 0) {
                    for (var i=0; i<files.length; i++) {
                        var file = files[i];
                        rainbowImagePreviewListWidget.rainbowImagePreviewList("add", {
                            file:file
                        });
                    }
                }
            });
            var rainbowImageSelectorWidget = $("div#rainbow_image_selector_widget");
            rainbowImageSelectorWidget.bind("dragover", function(event){
                var e = event.originalEvent;
                e.stopPropagation();
                e.preventDefault();
                $(this).find("label:last-child").show();
                $(this).addClass("rainbowImageDragOver");
                $(this).css({
                    "line-height":"30px"
                });
            });
            rainbowImageSelectorWidget.bind("dragleave", function(event){
                var e = event.originalEvent;
                e.stopPropagation();
                e.preventDefault();
            });
            rainbowImageSelectorWidget.bind("dragend", function(event){
                var e = event.originalEvent;
                e.stopPropagation();
                e.preventDefault();
            });
            rainbowImageSelectorWidget.bind("drop", function(event){
                var e = event.originalEvent;
                e.stopPropagation();
                e.preventDefault();
                $(this).removeClass("rainbowImageDragOver");
                $(this).css({
                    "text-align":"center"
                });
                var transfer = e.dataTransfer;
                var files = transfer.files;
                if (null != files && files.length > 0) {
                    for (var i=0; i< files.length; i++) {
                        var file = files[i];
                        rainbowImagePreviewListWidget.rainbowImagePreviewList("add", {
                            file:file
                        });
                    }
                }
            });
        });
    });
</script>